<template>
  <div class="affiliation-page-middle">
    <h4 class="data">
      <span>
        Data
      </span>
    </h4>
    <div class="content">
      <div class="item publication-amount">
        <h5 class="title">
          Publication Amount
        </h5>
        <span class="number">
          {{publicationAmount}}
        </span>
      </div>
      <div class="item average-citation">
        <h5 class="title">
          Average Citation
        </h5>
        <span class="number">
          {{averageCitation}}
        </span>
      </div>
      <div class="item co-affiliation-amount">
        <h5 class="title">
          CoAffiliation Amount
        </h5>
        <span class="number">
          {{coAffiliationAmount}}
        </span>
      </div>
      <div class="item cited-amount">
        <h5 class="title">
          Citation Amount
        </h5>
        <span class="number">
          {{citationAmount}}
        </span>
      </div>
      <div class="item average-download">
        <h5 class="title">
          Average Download
        </h5>
        <span class="number">
          {{averageDownload}}
        </span>
      </div>
      <div class="item available-download">
        <h5 class="title">
          Available Download
        </h5>
        <span class="number">
          {{availableDownload}}
        </span>
      </div>
      <div class="item direction-amount">
        <h5 class="title">
          Direction Amount
        </h5>
        <span class="number">
          {{directionAmount}}
        </span>
      </div>
      <div class="item start-year">
        <h5 class="title">
          Start Year
        </h5>
        <span class="number">
          {{startYear}}
        </span>
      </div>
      <div class="item end-year">
        <h5 class="title">
          End Year
        </h5>
        <span class="number">
          {{endYear}}
        </span>
      </div>
      <div class="item article-amount">
        <h5 class="title">
          Article Amount
        </h5>
        <span class="number">
          {{articleAmount}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AffiliationPageMiddle",
  props: {
    msg: Object
  },
  data() {
    return {

    };
  },
  computed: {
    publicationAmount() {
      return this.msg.publicationAmount;
    },
    averageCitation() {
      return this.msg.averageCitation;
    },
    coAffiliationAmount() {
      return this.msg.coAffiliationAmount ?? 0;
    },
    citationAmount() {
      return this.msg.citationAmount ?? 0;
    },
    averageDownload() {
      return this.msg.averageDownload ?? 0;
    },
    availableDownload(){
      return this.msg.availableDownload ?? 0;
    },
    directionAmount() {
      return this.msg.directionAmount ?? 0;
    },
    startYear() {
      return this.msg.startYear ?? 0;
    },
    endYear() {
      return this.msg.endYear ?? 0;
    },
    articleAmount() {
      return this.msg.articleAmount ?? 0;
    }
  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.affiliation-page-middle {
  display: flex;

  >h4 {
    background-color: #251314;
    color: white;
    display: grid;
    justify-items: center;
    align-items: center;
    transform: rotate(180deg);
    height: 150px;

    >span {
      writing-mode: vertical-rl;
      font-size: 14px;
      // font-style: italic;
    }
    ::after {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      position: absolute;
      top: calc(50%);
      right: 100%;
      width: 0;
      border-style: solid;
      border-width: 10px 10px 5px 0;
      border-color: transparent #251314 transparent transparent;
    }


    @media screen and (max-width: 500px){
      display: none;
    }
  }

  >.content {
    flex: 1;
    display: grid;
    // height: 150px;
    grid-template-columns: repeat(auto-fill, 20%);
    grid-template-rows: 150px;
    @media screen and (max-width: 1280px){
      grid-template-columns: repeat(auto-fill, 25%);
      justify-content: center;
      // align-content: center;
    }

    @media screen and (max-width: 700px) {
      grid-template-columns: repeat(auto-fill, 50%);
    }
    color: white;
    font-size: 2em;
    >.item {
      height: 150px;    
      text-align: center;
      line-height: 1.3em;
      display: grid;
      justify-content: center;
      align-content: center;
      grid-row-gap: 0px;


      >.title {
        font-size: 0.7em;
        font-family: 'Lato', sans-serif;
      }    
      >.number {
        font-family: 'Texturina', serif;
      }
    }



    >.publication-amount {
      background-color: #bb6bd9;
    }
    >.average-citation {
      background-color: #251314;
    }
    >.co-affiliation-amount {
      background-color: #112f7a;
    }
    >.cited-amount {
      background-color: #828282;
    }
    >.average-download {
      background-color: #4bcaf2;
    }
    >.available-download {
      background-color: #9d4dbb;
    }
    >.direction-amount {
      background-color: #7574b8;
    }
    >.start-year {
      background-color: #8785f2;
    }
    >.end-year {
      background-color: #5f5cf7;
    }
    >.article-amount {
      background-color: #ff7f59;
    }
  }
}
</style>
